<template>
  <div>
    <ay-aside :page-info="pageInfo" />
    <div class="app-container">
      <div class="filter-container">
        <el-row>
          <el-col :span="4">
            <el-input v-model="search.memberId" placeholder="会员ID" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div v-show="!search.isVal">
        输入查询上级
      </div>
      <div v-show="search.isVal" class="infinite-list-wrapper">
        <div
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
          class="list"
        >
          <div v-for="(item,idx) in listData" :key="idx" class="list-item">
            <el-row>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div class="img-box">
                    <img :src="item.memberAvatar ? item.memberAvatar : 'http://hanzhifu2-photos-public.oss-cn-shenzhen.aliyuncs.com/member_photo/097b1df4b6fb0923770521586edeeacb.png'" class="image">
                  </div>
                  <div class="content" style="padding: 14px;">
                    <span class="memberId">会员ID:{{ item.id }}</span>
                    <span class="memberId">会员等级:{{ item.levelName }}</span>
                    <span class="memberId">昵称:{{ item.nickname }}</span>
                    <span class="realname">姓名:{{ item.realname }}</span>
                    <span class="phone">联系方式:{{ item.memberMobile }}</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row>
          <el-col :span="8">
            <div v-if="loading">查询上级关系中...</div>
            <div v-if="noMore">没有上级了</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getSuperiorsList } from '@/api/data-core'
import AyAside from '@/components/Aside'
export default {
  name: 'DataCoreSuperiorSearch',
  components: { AyAside },
  filters: {},
  data() {
    return {
      filterNameKey: '1',
      search: {
        isVal: false,
        memberId: null // 会员id
      },
      count: 10,
      loading: true,
      noMore: false,
      listData: [],
      listLoading: false
    }
  },
  computed: {
    disabled() {
      return this.loading || this.noMore
    }
  },
  created() {
    this.pageInfo = this.$route.meta
  },
  methods: {
    load() {
      this.getList()
    },
    // 查询
    handleSearch() {
      this.search.isVal = true
      this.listData = []
      this.getList()
    },
    // 获取表格数据接口
    getList() {
      this.loading = true
      getSuperiorsList({
        memberId: this.search.memberId
      }).then(response => {
        for (let i = 0; i < response.data.superiors.length; i++) {
          this.listData.push(response.data.superiors[i])
        }
        if (response.data.superiors.length < 10) {
          this.noMore = true
        }
      }).catch(() => {
        this.noMore = true
        this.search.isVal = false
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
.app-container {
  .filter-container{
  }
  .infinite-list-wrapper {
    overflow: auto;
    text-align: center;
    .list {
      .list-item {
        text-align: center;
        padding: 10px;
        .img-box {
          padding-top: 10px;
          img {
            width: 160px;
          }
        }
        .content {
          span {
            display: block;
          }
        }
      }
    }
  }
}
</style>
